<template>
  <div
    :class="{'active': selected, 'last': isLast}"
    class="card"
  >
    <span style="margin: auto; line-height: 25px; font-size: 12px;">
      {{ label }}
      <div style="display: inline-block; vertical-align: middle;">
        <slot name="icon"></slot>
      </div>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    selected: Boolean,
    isLast: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
};
</script>

<style scoped>
.card {
  width: 70px;
  height: 25px;
  color: #999;
  background-color: #fff;
  text-align: center;
  margin: auto 0;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  cursor: pointer;
}

.last {
  border-right: 1px solid #cccccc;
}

.active {
  color: #fff;
  background-color: #3271ae;
}
</style>